import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:cached_network_image/cached_network_image.dart';


class ImageDemo extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return new Scaffold(
			appBar: new AppBar(
				title: new Text("Image Demo"),
			),
			body: new Column(
				children: <Widget>[

					Text("Image.network Demo"),

					Row(
						children: <Widget>[
							Text("fill"),

							Image.network(
								'http://n.sinaimg.cn/sports/transform/282/w650h432/20190821/6e36-icmpfxc0055274.jpg',
								width: 100,
								height: 100,
								fit: BoxFit.fill,
							),
						],
					),


					Row(
						children: <Widget>[
							Text("cover"),

							Image.network(
								'http://n.sinaimg.cn/sports/transform/282/w650h432/20190821/6e36-icmpfxc0055274.jpg',
								width: 100,
								height: 100,
								fit: BoxFit.cover,
							),
						],
					),


					Row(
						children: <Widget>[
							Text("contain"),

							Image.network(
								'http://n.sinaimg.cn/sports/transform/282/w650h432/20190821/6e36-icmpfxc0055274.jpg',
								width: 100,
								height: 100,
								fit: BoxFit.contain,
							),
						],
					),


					Text("FadeInImage.memoryNetwork Demo"),

					Row(
						children: <Widget>[
							Text("contain"),

							FadeInImage.memoryNetwork(
								placeholder: kTransparentImage,
								image: 'https://cdn.pixabay.com/photo/2019/08/08/13/52/elephant-4393034_960_720.jpg',
								width: 100,
								height: 100,
								fit: BoxFit.contain,
							),
						],
					),


					Text("CachedNetworkImage Demo"),

					Row(
						children: <Widget>[
							Text("contain"),

							CachedNetworkImage(
								placeholder: (context, url) => new CircularProgressIndicator(),
								imageUrl: 'http://n.sinaimg.cn/sports/transform/282/w650h432/20190821/6e36-icmpfxc0055274.jpg',
//								width: 100,
//								height: 100,
							),
//						CachedNetworkImage(imageUrl: null)
						],
					),


				],
			),
			floatingActionButton: new Theme(
				data: Theme.of(context).copyWith(accentColor: Colors.yellow),
				child: new FloatingActionButton(
					onPressed: null,
					child: new Icon(Icons.add),
				),
			),
		);
	}
}